<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 200px;
      height: 200px;
      background-color: #0f0;
      margin: 10px auto;
      transition: all 2s;
    }

    div:nth-of-type(even) {
      background-color: #00f;
    }

    div:nth-of-type(1) {
      background: linear-gradient(30deg, green 30%, orange 40%, red 50%, yellow 60%, purple 70%);
      background: -webkit-linear-gradient(30deg, green 30%, orange 40%, red 50%, yellow 60%, purple 70%);
      background: -moz-linear-gradient(30deg, green 30%, orange 40%, red 50%, yellow 60%, purple 70%);
      background: -o-linear-gradient(30deg, green 30%, orange 40%, red 50%, yellow 60%, purple 70%);
      background: -ms-linear-gradient(30deg, green 30%, orange 40%, red 50%, yellow 60%, purple 70%);
      /* background: repeating-linear-gradient(30deg, green 30%, orange 40%, red 50%, yellow 60%, purple 70%); */
    }

    div:nth-of-type(2) {
      width: 400px;
      /* background: radial-gradient(ellipse at center, green 20%, orange 40%); */

      background: repeating-radial-gradient(ellipse at center, green 20%, orange 40%);
      background: -webkit-repeating-radial-gradient(ellipse at center, green 20%, orange 40%);
      background: -moz-repeating-radial-gradient(ellipse at center, green 20%, orange 40%);
      background: -o-repeating-radial-gradient(ellipse at center, green 20%, orange 40%);
      background: -ms-repeating-radial-gradient(ellipse at center, green 20%, orange 40%);
    }

    div:nth-of-type(3):hover {
      /* transform: translateX(50px) translateY(-50px); */
      transform: translate(50px, 50px);
    }

    div:nth-of-type(4) {
      transition: all 5s;
    }

    div:nth-of-type(4):hover {
      transform: rotateZ(-2000deg);
    }

    div:nth-of-type(5):hover {
      /* transform: scaleX(2) scaleY(.5); */
      transform: scale(2, .5);
    }

    div:nth-of-type(6):hover {
      transform: skew(30deg, 30deg);
    }

    li {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      opacity: .6;
      font-size: 40px;
      text-align: center;
      line-height: 200px;
      list-style: none;
      position: absolute;
      top: 0;
      left: 0;
      transform-style: preserve-3d;
    }

    ul {
      width: 200px;
      height: 200px;
      margin: 200px auto;
      background-color: #ccc;
      position: relative;
      transform-style: preserve-3d;
      transition: all 3s;
    }

    ul:hover {
      transform: rotateX(50deg) rotateY(160deg);
    }

    li:nth-of-type(1) {
      top: -200px;
      transform: rotateX(90deg);
      transform-origin: bottom;
    }

    li:nth-of-type(5) {
      top: 200px;
      transform: rotateX(-90deg);
      transform-origin: top;
    }

    li:nth-of-type(3) {
      left: -200px;
      transform: rotateY(-90deg);
      transform-origin: right;
    }

    li:nth-of-type(4) {
      left: 200px;
      transform: rotateY(90deg);
      transform-origin: left;
    }

    li:nth-of-type(6) {
      transform: translateZ(-200px) rotateY(180deg);
    }
  </style>
</head>

<body>
  <!-- <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div> -->

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>

</html>